<template>
  <div class="card bg-base-100 shadow-xl h-full flex flex-col relative">
    <!-- 标题行 -->
    <header
      class="bg-primary text-primary-content text-sm font-bold py-1 text-center"
    >
      {{ title }}
    </header>

    <!-- 数字 -->
    <main class="flex-1 flex items-center justify-center">
      <p class="text-6xl font-bold text-base-content">{{ value }} {{ unit }}</p>
    </main>

    <!-- 单位：右下角 -->
    <!-- <span
      class="absolute bottom-2 right-2 text-lg font-medium text-base-content/60"
    >
      {{ unit }}
    </span> -->
  </div>
</template>

<script setup lang="ts">
defineProps<{ title: string; value: string | number; unit: string }>();
</script>
